<template>
    <div class="overflow-box">
        <table v-loading="loading">
            <tr>
                <th>Frame</th>
                <th>Stitches(included)</th>
                <th>Price</th>
                <th>Extra Stitches</th>
            </tr>
            <tr v-for="item in table" :key="item.id">
                <td>{{ `${item.width / 300}'' x ${item.height / 300}''` }}</td>
                <td>{{ item.base_stitches }}</td>
                <td>USD {{ item.base_price / 100 }}</td>
                <td>1000 stitches / USD 0.3</td>
            </tr>
            <tfoot>
                <tr>
                    <td colspan="4">
                        <i class="iconfont icon-xiangqing2"></i>
                        Multi-process fee: USD 2.99 (For using DTG and embroidery on the same garment)
                    </td>
                </tr>
            </tfoot>
        </table>
    </div>

</template>
<script>
export default {
    props: {
        table: {
            type: Array,
            default: () => []
        },
        loading: {
            type: Boolean,
            default: false
        }
    },

}
</script>
<style scoped lang="scss">
.overflow-box {
    width: calc(100% - 40px);
    overflow-x: auto;
    overflow-y: hidden;
    box-sizing: border-box;

    &::-webkit-scrollbar {
        /* 隐藏默认的滚动条 */
        -webkit-appearance: none;
    }

    &::-webkit-scrollbar:vertical {
        /* 设置垂直滚动条宽度 */
        width: 2px;
    }

    /* 这里不需要用到这个 */
    &::-webkit-scrollbar:horizontal {
        /* 设置水平滚动条厚度 */
        height: 2px;
    }

    &::-webkit-scrollbar-thumb {
        /* 滚动条的其他样式定制，注意，这个一定也要定制，否则就是一个透明的滚动条 */
        border-radius: 8px;
        border: 4px solid rgba(255, 255, 255, .4);
        background-color: rgba(0, 0, 0, .5);
    }


    table {
        min-width: 880px;

        th,
        td {
            width: 200px;
            height: 56px;
            border: 1px solid #e6e6e6;
            text-align: center;
        }

        th {
            background-color: #fafafa;
            font-family: Roboto-Medium, Roboto;
            font-weight: 500;
            font-size: 14px;
            color: #000000;
            line-height: 20px;
        }

        td {
            font-family: Roboto-Regular, Roboto;
            font-weight: 400;
            font-size: 14px;
            color: #292929;
            line-height: 20px;

            &:first-child {
                font-family: Roboto-Medium, Roboto;
                font-weight: 500;
            }
        }

        tfoot {
            td {
                font-family: Roboto-Regular, Roboto !important;
                font-weight: 400 !important;
                font-size: 14px !important;
                color: #292929;

                i {
                    color: #b8b8b8;
                    font-size: 14px;
                    padding-right: 4px;
                }
            }
        }
    }
}
</style>